<template>
<!-- 用到了 -->
<div style="padding: 10px" >
<!-- //问卷列表页 -->

  <!-- <div style="background-color:rgb(21, 21, 21,0.1);" > -->
    <!-- <div style="background-color:rgb(21, 21, 21,0.1);"> -->
       <div style="margin: 10px 0">
      
      <!-- #v-if="user.role === 1" -->
     <!-- <el-button type="primary" @click="add" >新增问卷</el-button>
      <el-button type="primary" icon="el-icon-search" @click="page()">查询</el-button> -->


    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="keyword" placeholder="请输入问卷标题" style="width: 200px;" ></el-input>
      </el-form-item>
     <el-button type="primary" icon="el-icon-search" @click="page()">查询</el-button>
      <el-button type="primary" @click="resetData()">清空</el-button>

      <el-button type="primary" @click="add" >新增问卷</el-button>
      </el-form>
    </div>
<!-- style="width: 100%"  -->
    <el-table
        :data="tableData"
        style="width: 100%" 
       
       
    >
      <!-- <el-table-column
          type="selection"    
          width="55">
      </el-table-column> -->
      <!-- <template slot-scope="scope">
              <span>{{ scope.row.status === 1 ? '未发布' : '已发布' }}</span>
            </template> -->
      <el-table-column
          prop="id"
          label="问卷编号id"
          sortable
      >
      </el-table-column>
      <el-table-column
          prop="questionTitle"
          label="问卷标题" >
      </el-table-column>
      <el-table-column
          prop="status"
          label="问卷状态">
        <template #default="scope">
          <span v-if="scope.row.status == 1">未发布</span>
          <span v-if="scope.row.status == 2">已发布</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="userId"
          label="用户编号">
      </el-table-column>
      <!-- <el-table-column
          prop="createTime"
          label="问卷创建时间">
      </el-table-column>
       <el-table-column
          prop="num"
          label="问卷的回收总数">
      </el-table-column> -->
      
      <el-table-column label="操作">
      
        <template #default="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.row)" >编辑</el-button> -->
          <el-button size="mini" @click="handleEdit(scope.row)" >编辑</el-button>
          <el-button size="mini" @click="towenjuan(scope.row)" >修改问题</el-button>
          <el-button size="mini" @click="addquestion(scope.row)" >添加问题</el-button>
           <el-button size="mini" @click="getroute(scope.row)" >分享</el-button>
            <el-button size="mini" @click="tongji(scope.row)" >统计</el-button>
             <el-button size="mini" @click="gotoyulan(scope.row)" >问卷预览</el-button>
             <el-button size="mini" @click="gotoyulan1(scope.row)" >问卷填写</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
          
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)" v-if="this.role === '1'">
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
<!-- 
    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div> -->


      <el-dialog title="提示" v-model="dialogVisible" width="30%" customClass="my-info-dialog">
        <el-form :model="form" label-width="120px">
          <el-form-item label="问卷标题">
            <el-input v-model="form.questionTitle" style="width: 80%"></el-input>
          </el-form-item>

          
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </template>
      </el-dialog>


      <!-- width="30%" -->
      <el-dialog title="提示" v-model="dialogVisible1" width="30%" customClass="my-info-dialog">
        <el-form :model="form" label-width="120px">
          <el-form-item label="问卷标题">
            <el-input v-model="form.questionTitle" style="width: 80%"></el-input>
          </el-form-item>

           <!-- <el-table-column
          prop="status"
          label="问卷状态">  
        <template #default="scope">
          <span v-if="scope.row.status == 1">未发布</span>
          <span v-if="scope.row.status == 2">已发布</span>
        </template>
      </el-table-column> -->

      <!-- <el-form-item label="问卷状态" :label-width="formLabelWidth" >
          <el-select v-model="form.value" placeholder="请选问卷状态" >
            <el-option label="未发布" value="1" key="1"></el-option>
            <el-option label="已发布" value="2" key="2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="问卷状态">
        <el-select v-model="form.status" placeholder="请选问卷状态" >
          <el-option
            v-for="item in StatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="save1">确 定</el-button>
          </span>
        </template>
      </el-dialog>

  </div>
</template>
<script>
import axios from 'axios'

export default {
  name:'questionnare',
   data() {
    return {
      user: {},
      // 加背景图片
      // bg: {
      //   backgroundImage: "url(" + require("@/assets/44.jpg") + ")",
      //   backgroundRepeat: "no-repeat",
      //   backgroundSize: "100% 100%"
      // },
      loading: true,
      scope:'',
      status:1,
      formLabelWidth: "120px",

      form: {
        status:1,
        userId:sessionStorage.getItem('useraccount')
      },
     StatusList: [
        {
          label: '未发布',
          value: 1
        },
        {
          label: '已发布',
          value: 2
        }
      ],
      dialogVisible1:false,
      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      keyword:'',
      role:sessionStorage.getItem('role'),
      tableData: 
        [
          {id:'1',questionTitle:'1',status:'2',userId:'11'},
          {id:'2',questionTitle:'1',status:'2',userId:'11'}
        ],
      ids: []
    }
  },

  methods:{

    add() {
      this.dialogVisible = true
      this.form = {}
     
    },

    save1(){
       axios({
         method:"put",
        //  url:"http://uchiha.vip:5000/questionnaire/?id="+this.form.id,
         url:"/questionnaire/?id="+this.form.id,
         data:this.form
      }).then(res=>{
        console.log(res)
         this.$message({
              type: "success",
              message: "修改成功"
          })
         this.load() // 刷新表格的数据
        this.dialogVisible1 = false  // 关闭弹窗
      })
      },

    save(){
      axios({
         method:"POST",
        //  url:"http://uchiha.vip:5000/questionnaire/",
        url:"/questionnaire/",
        //  headers:'application/json; charset=utf-8',
         data:{"questionTitle":this.form.questionTitle,"userId":sessionStorage.getItem('useraccount'),status:1}

      }).then(res=>{
        console.log(res)
        console.log('789'+sessionStorage.getItem('useraccount'))
         this.$message({
              type: "success",
              message: "新增成功"
          })
         this.load() // 刷新表格的数据
        this.dialogVisible = false  // 关闭弹窗
      })
     // }



    },
    handleEdit(row) {
       console.log(row.id)
       this.form=row
      this.dialogVisible1 = true
    },

     handleDelete(id) {
      console.log(id)


        const _this=this
    axios({
            method:"delete",
            // url: "http://uchiha.vip:5000/questionnaire/?id=" +id,
            url: "/questionnaire/?id=" +id,

            
        }).then(function (resp){
            console.log(resp)
           // _this.$message('这是一条消息提示');
             _this.$message({
            type: "success",
            message: "删除成功"
          })
          _this.load() // 刷新表格的数据
        })

    },

    //问卷列表
    load(){
       const _this=this;
        var qs = require('qs');
        axios({
            method:"get",
            // url:"http://uchiha.vip:5000/allQuestionnaire/",
            url:"/allQuestionnaire/",
        }).then(function (resp){
            console.log(resp.data.data)
            _this.tableData=resp.data.data
        })
    },
    //  refresh () {
    //   this.$forceUpdate()
    // },

     page() {
     
      console.log(222)
     this.selectdata();
    },
    //模糊查询
    selectdata(){
      
       //const _this = this;
      //  axios({
      //   // url:"http://uchiha.vip:5000/questionnaire/?id=" +this.keyword,
      //   url:"/questionnaire/?id=" +this.keyword,

      //   method: "get"
      // }).then(function(res) {
      //   _this.tableData = res.data.data;
       
      // });

    //  Vue 最简单的实现input 输入框的模糊查询（不使用后端接口） https://blog.csdn.net/Fxhani/article/details/108759121
    			var _this = this;
          var tableData=[]
    //循环模拟数据的数组
                this.tableData.map(function (item) {
	          if (item.questionTitle.search(_this.keyword.trim()) != -1) {
	            tableData.push(item);
	            console.log(tableData);
	          }
	        });

                this.tableData = [];
	              this.tableData = tableData;
	              return tableData;



    },

     resetData() {
      //清空的方法
      //表单输入项数据清空
      this.keyword = '';
      // this.page()
      this.load();
    },
    //分享链接 消息提示  https://blog.csdn.net/weixin_43292447/article/details/89242307  vue获取当前页面路由
    getroute(row){
      // console.log('http://'+require('host'))
     this.$alert("http://localhost:8080/testsubmitAnswer?id="+row.id, '标题名称', {//本地
       // this.$alert("http://114.55.103.169:8080/testsubmitAnswer?id="+row.id, '标题名称', {//ip地址的
      // this.$alert("http://uchiha.vip:8080/testsubmitAnswer?id="+row.id, '标题名称', {//没备案域名
      // this.$alert("http://question.hcelao.top/testsubmitAnswer?id="+row.id, '标题名称', {//绑定了域名的 线上使用

          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
    },
    towenjuan(row){
      this.$router.push({
             path:'/testedit-survey',
             query:{
              //  questionTitle:row.questionTitle,
               id:row.id
             }
           }) 
    },
    gotoyulan(row){
       this.$router.push({
             path:'/testviewsurvey',
              query:{
              //  questionTitle:row.questionTitle,
               id:row.id
             }
           }) 
    },
    gotoyulan1(row){
         this.$router.push({
             path:'/testsubmitAnswer',
              query:{
              //  questionTitle:row.questionTitle,
               id:row.id
             }
           }) 
    },
    addquestion(row){
      this.$router.push({ 
             path:'/testcreatesurvey',
              query:{
              //  questionTitle:row.questionTitle,
               id:row.id
             }
           }) 
    },
    
    tongji(row){
       this.$router.push({ 
             path:'/testtest',
              query:{
              //  questionTitle:row.questionTitle,
               id:row.id
             }
           }) 
    }

  },
  created(){

    this.load()
  },
  mounted(){
        this.load()
        //this.getTitle()
    }
}
</script>
<style >
 
/* background-color: #ecf5ff; */

/* --el-dialog-background-color: #f4f4f5; */

 /*标题背景色*/
  .my-info-dialog .el-dialog__header  {
    background-color: #fdf6ec;
  }
  /*body背景色*/
  .my-info-dialog .el-dialog__body  {
    background-color: #fdf6ec;
  }
   .my-info-dialog .el-dialog__footer  {
    background-color: #fdf6ec;
  }
/*  element ui dialog样式
https://blog.csdn.net/qq_37167049/article/details/92089552 */ 
</style>